<template>
  <div class="hello">
    <h1>{{ message }}</h1>
    <button @click="updateMessage" title="反转文字">点击反转</button>

    <!-- 添加计数器 -->
    <div class="counter">
      <h2>计数器: {{ count }}</h2>
      <div class="counter-buttons">
        <button @click="count--" title="减少">-</button>
        <span class="count-display">{{ count }}</span>
        <button @click="count++" title="增加">+</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: {
      type: String,
      required: true
    }
  },
  setup(props) {
    // 创建本地状态
    const message = ref(props.msg);
    const count = ref(0); // 添加计数器状态

    // 点击按钮时反转文字
    const updateMessage = () => {
      message.value = message.value.split('').reverse().join('');
    };

    return { message, updateMessage, count };
  }
});
</script>

<style scoped>
.hello {
  text-align: center;
  margin: 20px;
}

.counter {
  margin: 20px 0;
}

.counter-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.count-display {
  font-size: 24px;
  margin: 0 20px;
}

button {
  padding: 8px 16px;
  font-size: 16px;
  cursor: pointer;
}
</style>
